
//  快捷边距  字体大小    如 p-x-20  p-x-20 p-l-20  x:横向 x纵向  l左边 r右边   ft-20字体大小 20rpx

$counter : 200;
@while $counter > 0 {
    .p-#{$counter} {
        padding: (1rpx * $counter);
      }
      .p-t-#{$counter} {
        padding-top: (1rpx * $counter);
      }
      .p-r-#{$counter} {
        padding-right: (1rpx * $counter);
      }
      .p-b-#{$counter} {
        padding-bottom: (1rpx * $counter);
      }
      .p-l-#{$counter} {
        padding-left: (1rpx * $counter);
      }
      .p-x-#{$counter}{
          padding-left: (1rpx * $counter);
          padding-right: (1rpx * $counter);
      }
      .p-y-#{$counter}{
          padding-top: (1rpx * $counter);
          padding-bottom: (1rpx * $counter);
      }
      .m-#{$counter} {
        margin: (1rpx * $counter);
      }
      .m-t-#{$counter} {
        margin-top: (1rpx * $counter);
      }
      .m-r-#{$counter} {
        margin-right: (1rpx * $counter);
      }
      .m-b-#{$counter} {
        margin-bottom: (1rpx * $counter);
      }
      .m-l-#{$counter} {
        margin-left: (1rpx * $counter);
      }
      .m-x-#{$counter}{
          margin-left: (1rpx * $counter);
          margin-right: (1rpx * $counter);
      }
      .m-y-#{$counter}{
          margin-top: (1rpx * $counter);
          margin-bottom: (1rpx * $counter);
      }
      .ft-#{$counter} {
        font-size: (1rpx * $counter);
      }
    $counter : ($counter - 1);
}


// 设置动态生成的class (flex布局相关的class)
// 'display-flex':class名
// (display,flex)，第一个是属性名，第二个是属性值
$mapClass:(
'd-f':(display,flex),
'a-i-c':(align-items,center),
'a-i-s':(align-items,flex-start),
'a-i-e':(align-items,flex-end),
'j-c-c':(justify-content,center),
'j-c-s-a':(justify-content,space-around),
'j-c-s-b':(justify-content,space-between),
'j-c-s':(justify-content,flex-start),
'j-c-e':(justify-content,flex-end),
'f-d-r':(flex-direction,row),
'f-d-c':(flex-direction,column),
'flex-':(flex),
'flex-s-':(flex-shrink),
'more-line-':(),
);
$keyArray:map-keys($mapClass);
@each $key in $keyArray {
	@if $key=='flex-'{
		$value: 5;
		$list:map-get($mapClass,$key);
		@while $value > 0 {
			.#{$key}#{$value}{
				#{nth($list,1)}:$value;
			}
		    $value: ($value - 1);
		}
	}
	@else if $key=='flex-s-'{
		$value1: 5;
		$list:map-get($mapClass,$key);
		@while $value1 >= 0 {
			.#{$key}#{$value1}{
				#{nth($list,1)}:$value1;
			}
		    $value1: ($value1 - 1);
		}
	}@else if $key=='more-line-' {
		$counter: 15;
		@while $counter > 0 {
			@if $counter==1{
				.more-line-#{$counter}{
					overflow: hidden;      
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}@else {
				.more-line-#{$counter}{
					overflow: hidden;      
					text-overflow: ellipsis;      
					display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */      
					-webkit-line-clamp: 1*$counter; /* 控制最多显示几行 */      
					-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */   
				}
			}
		    
		    $counter: ($counter - 1);
		}
	}@else{
		.#{$key}{
			$list:map-get($mapClass,$key);
			#{nth($list,1)}:nth($list,2);
		}
	}
}